<template>
	<view>
		<Header :isBack="true">
			<block slot="content">{{title}}</block>
		</Header>

		<view class="content-box">
			<bjx-form class="form" :rules="rules" :form="formData" ref="form">
				<view class="mobile-login">
					<bjx-form-item class="mobile-login-mobile" label-type="inline" prop="mobile" label="手机号码">
						<view slot="label" style="height:90rpx;padding-top:25rpx;">
							<image class="mobile-login-mobile-img" src="@/static/images/shoujihao.png"></image>
						</view>
						<input class="mobile-login-mobile-content" type="text" value="" placeholder="请输入手机号码"
							v-model="formData.mobile" name="mobile" />
					</bjx-form-item>

					<bjx-form-item class="mobile-login-code" label-type="inline" prop="code" label="短信验证码"
						style="width:100%;">
						<view slot="label" style="height:90rpx;padding-top:25rpx;">
							<image class="mobile-login-code-img" src="@/static/images/yanzhengma.png" mode=""></image>
						</view>
						<view class="get-mobile-code">
							<input class="mobile-login-code-content" type="text" value="" placeholder="请输入验证码"
								v-model="formData.code" name="code" />
							<text class="mobile-login-code-btn" @tap="getCode">{{codeTip}}</text>
						</view>
					</bjx-form-item>

					<bjx-form-item class="user-login-pwd" label-type="inline" prop="password" label="密码">
						<view slot="label" style="height:90rpx;padding-top:25rpx;">
							<image class="user-login-pwd-img" src="@/static/images/mimashezhi.png" mode=""></image>
						</view>
						<input class="user-login-pwd-content" :type="passwordType1" value="" :placeholder="placeholder1"
							v-model="password" name="password" :style="{fontSize: passwordFontSize1}" />
						<image class="isdisplaymima" v-if="!isDisplay1" src="@/static/images/biyan.png"
							@tap="translateMima1(1)" alt="">
							<image class="isdisplaymima" v-else src="@/static/images/zhengyan.png"
								@tap="translateMima1(2)" alt="">
					</bjx-form-item>

					<bjx-form-item class="user-login-pwd" style="border-bottom: none;" label-type="inline"
						prop="repassword" label="确认密码">
						<view slot="label" style="height:90rpx;padding-top:25rpx;">
							<image class="user-login-pwd-img" src="@/static/images/mimashezhi.png" mode=""></image>
						</view>
						<input class="user-login-pwd-content" :type="passwordType2" value="" :placeholder="placeholder2"
							v-model="repassword" name="repassword" :style="{fontSize: passwordFontSize2}" />
						<image class="isdisplaymima" v-if="!isDisplay2" src="@/static/images/biyan.png"
							@tap="translateMima2(1)" alt="">
							<image class="isdisplaymima" v-else src="@/static/images/zhengyan.png"
								@tap="translateMima2(2)" alt="">
					</bjx-form-item>

				</view>
				<view class="login" @tap="confirmSubmit">
					注&nbsp;&nbsp;册
				</view>
			</bjx-form>
			<view class="content-about">
				<view class="remember" @tap="agree">
					<checkbox-group>
						<label>
							<checkbox value="cb" :checked="checked" class="remember-input" />我已阅读并同意
						</label>
					</checkbox-group>
				</view>
				<navigator class="forget" url="/pages6/pages/docs/service-contract">
					《服务协议》
				</navigator>
				<navigator class="forget" url="/pages6/pages/docs/privacy-policy">
					《隐私保护政策》
				</navigator>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				title: '个人注册',
				codeTip: '获取验证码',
				numShow: false,
				second: 60,
				noClick: true,

				checked: false,
				isDisplay1: false,
				isDisplay2: false,
				passwordType1: 'password',
				passwordType2: 'password',

				passwordFontSize1: '32rpx',
				passwordFontSize2: '32rpx',
				placeholder1: '请输入密码',
				placeholder2: '请再次输入密码',
				password: '',
				repassword: '',

				formData: {
					mobile: '',
					code: '',
					password: '',
					repassword: ''
				},
				rules: {
					mobile: {
						required: true,
						rule: 'length:11',
						message: {
							reg: '请填写正确格式的手机号码'
						}
					},
					code: {
						required: true,
						rule: 'type:string',
						message: {
							type: '短信验证码不能为空'
						}
					},
					password: {
						required: true,
						rule: 'type:string|length:6,20',
						message: {
							length: '密码为6-20个字符'
						}
					},
					repassword: {
						required: true,
						rule: 'type:string|length:6,20',
						message: {
							length: '确认密码为6-20个字符'
						}
					}
				}
			}
		},
		components: {

		},

		watch: {
			password(newPassword, oldPassword) {
				this.formData.password = newPassword;
				if (newPassword) {
					this.passwordFontSize1 = this.isDisplay1 == true ? '32rpx' : '50rpx'
					this.placeholder1 = ''
				} else {
					this.passwordFontSize1 = '32rpx'
					this.placeholder1 = '请输入密码'
				}
			},
			repassword(newPassword, oldPassword) {
				this.formData.repassword = newPassword;
				if (newPassword) {
					this.passwordFontSize2 = this.isDisplay2 == true ? '32rpx' : '50rpx'
					this.placeholder2 = ''
				} else {
					this.passwordFontSize2 = '32rpx'
					this.placeholder2 = '请再次输入密码'
				}
			},
		},
		methods: {
			...mapMutations(['login']),

			async translateMima1(type) {
				switch (type) {
					case 1:
						this.passwordFontSize1 = '32rpx'
						this.isDisplay1 = true;
						this.passwordType1 = 'text';
						break;
					case 2:
						this.passwordFontSize1 = this.placeholder1 == '' ? '50rpx' : '32rpx'
						this.isDisplay1 = false;
						this.passwordType1 = 'password';
						break;
				}
			},

			async translateMima2(type) {
				switch (type) {
					case 1:
						this.passwordFontSize2 = '32rpx'
						this.isDisplay2 = true;
						this.passwordType2 = 'text';
						break;
					case 2:
						this.passwordFontSize2 = this.placeholder2 == '' ? '50rpx' : '32rpx'
						this.isDisplay2 = false;
						this.passwordType2 = 'password';
						break;
				}
			},

			async getCode() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					return false;
				}
				if (this.numShow == true) {
					this.$api.msg(this.second + 's之内不可再次发送');
					return false;
				}
				if (!this.formData.mobile) {
					this.$api.msg('请输入手机号码');
					return false;
				}

				let res = await this.$myRequest({
					url: '/getCode/' + this.formData.mobile
				})

				this.$api.msg(res.data.msg, 'success')
				this.codeTip = '60s'
				this.numShow = true
				var interval = setInterval(() => {
					--this.second;
					this.codeTip = this.second + 's'
					if (this.second <= 0) {
						clearInterval(interval);
						this.codeTip = '获取验证码';
						this.numShow = false;
						this.second = 60
					}
				}, 1000)
			},

			async agree() {
				if (this.checked === true) {
					this.checked = false
				} else {
					this.checked = true;
				}
			},

			// 触发提交表单
			confirmSubmit() {
				if (this.checked === false) {
					this.$api.msg('请先同意用户协议！')
					this.checked = true;
					return false;
				}

				this.$refs.form.validate(val => {
					if (val == true) {
						for (let i = 0; i < this.formData.password.length; i++) {
							let newWord = this.formData.password.substr(i, 1);
							if (!/[0-9a-zA-Z]/.test(newWord)) {
								this.$api.msg('密码只能输入大小写字母和数字');
								return false;
							}
						}

						if (this.formData.password !== this.formData.repassword) {
							this.$api.msg('登录密码和确认密码不一致！');
							return false;
						}
						let dataObj = {
							mobile: this.formData.mobile,
							code: this.formData.code,
							password: this.formData.password,
							repassword: this.formData.repassword
						};
						this.submit(dataObj);
					}
				})
			},
			//登录提交
			async submit(dataObj) {
				let res1 = await this.$myRequest({
					url: '/registerUser',
					data: dataObj,
					methods: 'post'
				})

				if (res1.data.status === 0) {
					this.$api.msg('注册失败');
				}

				this.login(res1.data.data);

				dataObj.username = dataObj.mobile;
				dataObj.cate = 1;
				dataObj.type = 1;
				// console.log(dataObj)
				let res2 = await this.$myRequest({
					url: '/login',
					data: dataObj,
					methods: 'post'
				})
				// console.log(res)
				let token = res2.data.token;
				uni.setStorageSync('token', token);
				uni.setStorageSync('cate', 1);
				this.$api.msg('注册成功！', 'success', 1000);
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages6/pages/my/my'
					})
				}, 1000)
			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
		font-size: $font-lg;
	}
</style>
<style lang="scss" scoped>
	.content-box {
		// #ifdef APP-PLUS
		padding: 210rpx 50rpx 0;
		// #endif

		// #ifdef H5
		padding: 158rpx 50rpx 0;
		// #endif
		
		// #ifdef MP-WEIXIN
		padding: 184rpx 50rpx 0;
		// #endif

		height: 850rpx;

		.mobile-login {
			border-top: 1px solid #f3f3f6;
			height: 358rpx;
			background-color: #f7f7f7;
			border-radius: 20rpx;

			.mobile-login-mobile {
				height: 90rpx;
				// line-height: 90rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ebebeb;

				.mobile-login-mobile-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}


				.mobile-login-mobile-content {
					display: inline-flex;
					align-items: center;
					font-size: $font-lg;
					color: #000;
					// font-size: $font-base;
				}

			}

			.mobile-login-code {
				height: 90rpx;
				// line-height: 90rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ebebeb;
				// background-color: #fff;
				position: relative;

				.mobile-login-code-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}

				.get-mobile-code {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;


					.mobile-login-code-content {
						display: inline-flex;
						align-items: center;
						// font-size: $font-base;
						font-size: $font-lg;
						width: 80%;
						color: #000;
					}

					.mobile-login-code-btn {
						position: absolute;
						right: 20upx;
						background-color: #ee7f06;
						border-radius: 8rpx;
						color: #fff;
						height: 60rpx;
						line-height: 60rpx;
						padding: 0 20rpx;
						margin-right: 20rpx;
						font-size: $font-base;
					}
				}

			}

			.user-login-pwd {
				position: relative;
				height: 90rpx;
				// line-height: 90rpx;
				padding-left: 30rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #ebebeb;
				// background-color: #fff;

				.user-login-pwd-img {
					width: 38rpx;
					height: 40rpx;
					margin-left: 6rpx;
					margin-right: 24rpx;
				}

				.user-login-pwd-content {
					display: inline-flex;
					font-size: $font-lg;
					background-color: #F7F7F7;
					border: none;
					color: #000;
					width: 70%;
					// font-size: $font-base;
				}
			}
		}

		.content-about {
			padding-top: 20rpx;
			line-height: 42rpx;
			width: 100%;
			color: #666666;
			font-size: 24rpx;
			// display: flex;
			// align-items: center;

			.remember {
				display: inline-block;
				// width: 48%;

				.remember-input {
					display: inline-block;
					transform: scale(0.6)
				}

			}

			.forget {
				color: #f3431a;
				display: inline-block;
			}
		}

		.isdisplaymima {
			width: 38rpx;
			height: 30rpx;
			position: absolute;
			right: 100rpx;
			top: 32rpx;
		}

		.login {
			margin-top: 60rpx;
			background-color: #f3431a;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 15rpx;
			color: #fff;
			// letter-spacing: 19rpx;
		}
	}
</style>
